<!-- <template>
	<view class="register">
		<view class="title">
			<image src="../../static/images/register.png" mode="aspectFit"></image>
			<image src="../../static/images/register2.png" mode="aspectFit"></image>
		</view>
		<view class="content">
			<uni-forms ref="loginForm" :modelValue="loginFormData" :rules="rules" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput v-model="loginFormData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput v-model="loginFormData.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput v-model="loginFormData.password" placeholder="请输入手机号" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="login(loginForm)">注册</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		userStore
	} from '../../store/userStore';
	import {
		CONFIG
	} from '../../utils/config';
	let wh = computed(() => {
		let h = uni.getWindowInfo().windowHeight
		console.log("h=" + h)
		return h
	})
	const loginFormData = ref({
		username: '',
		password: '',
		phone:""
	})
	// 验证表单
	const rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: '请输入用户名'
				},
				{
					minLength: 2,
					maxLength: 11,
					errorMessage: '用户必须在{minLength}到{maxLength}个字符之间'
				}, {
					pattern: '^\\w{2,11}$',
					errorMessage: '请输入2-11位数字字母和下划线作为用户名'
				}
			]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码'
			}, {
				pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
				errorMessage: '请输入3-10位数字字母和特殊字符密码'
			}]
		},
		phone: {
			rules: [{
					required: true,
					errorMessage: '请输入手机号'
				},
				{
					Length: 11,
					errorMessage: '手机号必须为11位'
				}, {
					pattern: '^\\w{11}$',
					errorMessage: '请输入11位手机号码'
				}
			]
		},
	})
	let loginForm = ref(null)
	// 登录
	let store = userStore()
	
	function login(loginForm) {
				loginForm.validate().then((res) => {
					let params = encodeURI(`{"username":"${res.username}","password":"${res.password}"}`)
					console.log(params)
					uni.$get(`${CONFIG.leancloud_url}/1.1/classes/User?where=${params}`)
						.then(res => {
						 
							if (res.results.length> 0) {
								uni.showToast({
									title: "登录成功",
									icon: "success"
								})
								let user = res.results[0]
								console.log(user)
								store.addUserInfo(user.objectId, user.username, user.phone)
		                        uni.navigateBack()
		
							}
						})
						
		
				}).catch(err => {
					// 验证失败 
					console.log(err)
				})
			}
</script>

<style>
.register {
		/* 这里添加边框,页面高度就没问题,如果不添加边框,那么页面内容就多余容器高度,显示滚动条,可以滚动 原因待查，。*/
		/* border: 1px solid red; */
		position: relative;
	}

	/* 图片区域距离上方距离 */
	.register .title {
		margin: 100px 30px 0;
		/* border: 1px solid red; */
	}

	/* 设置图片高度,宽度自适应 */
	.register .title image:nth-child(1) {
		height: 50px;

	}

	.register .title image:nth-child(2) {
		height: 30px;
	}

	/* 内容区域的外边距 */
	.register .content {
		margin: 10px 20px;
	}

</style -->>

<template>
	<view class="register" :style="{height:wh+'px'}">
		<view class="title">
			<image src="../../static/images/register.png" mode="aspectFit"></image>
			<image src="../../static/images/register2.png" mode="aspectFit"></image>
		</view>
		<view class="content">
			<uni-forms ref="form" :rules="rules" :model="regForm" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput prefix-icon="person" v-model="regForm.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput prefix-icon="locked" type="password" v-model="regForm.password"
						placeholder="请输入密码" />
				</uni-forms-item>
				<!-- <uni-forms-item name="password2">
					<uni-easyinput prefix-icon="locked" type="password" v-model="regForm.password2"
						placeholder="请输入重复密码" />
				</uni-forms-item>
				<uni-forms-item name="email">
					<uni-easyinput prefix-icon="email" v-model="regForm.email" placeholder="请输入邮箱" />
				</uni-forms-item> -->
				<uni-forms-item name="phone">
					<uni-easyinput prefix-icon="phone" type="number" v-model="regForm.phone" placeholder="请输入手机" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="register(form)">注册</button>
		</view>
		<view class="login">
			<navigator url="/pages/login/login">已有账号，去登录</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		computed
	} from 'vue'

	import {
		userStore
	} from "../../store/userstore.js"
	import {
		CONFIG
	} from "../../utils/config.js"
	import {
		onReady
	} from "@dcloudio/uni-app"
	const regForm = ref({
		username: '',
		password: '',
		// password2: '',
		// email: '',
		mobile: ''
	})
	const form = ref(null)

	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	const wh = ref(0)
	onReady(() => {
		// wh.value=uni.getSystemInfo().windowHeight
		// console.log(uni.getSystemInfo().windowHeight);
		wh.value = uni.getWindowInfo().windowHeight
		console.log(uni.getWindowInfo().windowHeight)
	})

	function register(form) {
		form.validate().then(res => {
			//验证通过,进行接口请求用户注册
			uni.$post(`${CONFIG.leancloud_url}/1.1/classes/User?`, regForm.value).then(res2 => {
				//返回码400表示注册失败。显示错误信息
				if (res2.code == 400) {
					uni.showToast({
						title: res2.message,
						icon: "error"
					})
					return;
				}
				// 返回吗200表示注册成功，显示显示成功信息，并返回
				if (res2.code == 200) {
					uni.showToast({
						title: "登录成功",
						icon: "success"
					})
					// uni.navigateTo({
					// 	url:"/pages/Login/Login"
					// })


				}
				uni.navigateBack()
			})
		}).catch(err => {
			// 验证失败
			console.log(err);
		})
	}

	const rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: "请输入用户名"
				},
				{
					pattern: "^\\w{3,10}$",
					errorMessage: '请输入3-10位数字字母和下划线作为用户名'
				}
			]
		},
		password: {
			rules: [{
					required: true,
					errorMessage: "请输入密码"
				},
				{
					pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
					errorMessage: '请输入3-10位数字字母和特殊字符密码'
				}
			]
		},
		
		mobile: {
			rules: [{
				required: true,
				errorMessage: "请输入手机号码"
			}, {
				pattern: '^1[3-9]\\d{9}$',
				errorMessage: "电话号码格式错误"
			}]
		}
		
	})
</script>

<style scoped>
	.register {
		border: 1px solid white;
		position: relative;
	}

	.register .title {
		margin-top: 70px;

	}

	.register .title image:nth-child(1) {
		height: 50px;
	}

	.register .title image:nth-child(2) {
		height: 30px;
	}

	.register .content {
		margin: 10px 20px;
	}

	.register .login {
		position: absolute;
		width: 100vw;
		text-align: center;
		color: #007aff;
		bottom: 20px;
		font-size: 20rpx;
	}
</style>
